<template>
  <transition name="fade">
    <div class="login-form" v-show="isShow">
      <div class="mask"></div>
      <div class="title">
        <span class="title-text">{{ title }}</span>
        <span class="title-close" @click="isShow = false">×</span>
      </div>
      <template v-if="loginType === 'login'">
        <div class="login-form-content">
          <div class="login-form-box">
            <input placeholder="请输入用户名" type="text" v-model="loginForm.username">
            <input placeholder="请输入密码" type="text" v-model="loginForm.password">
          </div>
          <div class="login-form-btn">
            <button @click="loginSubmit">登录</button>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="login-form-content">
          <div class="login-form-box">
            <input placeholder="请输入用户名" type="text" v-model="registerForm.username">
            <input placeholder="请输入密码" type="text" v-model="registerForm.password">
            <input placeholder="请输入确认密码" type="text" v-model="registerForm.qrPassword">
          </div>
          <div class="login-form-btn">
            <button @click="registerSubmit">注册</button>
          </div>
        </div>
      </template>
      <div class="login-form-change">
        <span @click="loginTypeChange">{{ loginType ==='login' ? '没有账号，前往注册' : '已有账号，我要登录'}}</span>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      isShow: true,
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: '',
        qrPassword: ''
      }
    }
  },
  props: {
    title: {
      type: String,
      default: '用户登录 / 注册'
    },
    loginType: {
      type: String,
      default: 'login'
    }
  },
  methods: {
    loginTypeChange () {
      if (this.loginType === 'login') {
        this.loginType = 'register'
      } else {
        this.loginType = 'login'
      }
    },
    open () {
      this.isShow = true
    },
    loginSubmit () {

    },
    registerSubmit () {

    }
  }
}
</script>

<style lang="scss" scoped>
  .login-form {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 500px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin-left: -255px;
    margin-top: -155px;
    background: #FFFFFF;
    z-index: 1000;
    color: #FFFFFF;
    .title {
      display: flex;
      flex-direction: row;
      color: #FFFFFF;
      background: #409EFF;
      padding: 10px;
      *::selection {
        background: none;
      }
      .title-text {
        flex: 1;
        line-height: 30px;
        padding-left: 10px;
        font-size: 20px;
      }
      .title-close {
        width: 30px;
        font-size: 30px;
        font-weight: 700;
        line-height: 30px;
        cursor: pointer;
      }
    }
    .login-form-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: inherit;
      color: #000000;
      .login-form-box {
        border: 1px solid #AAAAAA;
        display: flex;
        flex-direction: column;
        align-items: center;
        input + input {
          border-top: 1px solid #DDDDDD;
        }
        input {
          border: none;
          line-height: 35px;
          width: 300px;
          padding-left: 10px;
          outline: none;
        }
      }
      .login-form-btn {
        margin-top: 20px;
        background: inherit;
        button {
          background:  linear-gradient(#409EFF, #669ed7);
          border: none;
          width: 200px;
          height: 40px;
          line-height: 40px;
          border-radius: 10px;
          color: #FFFFFF;
          font-size: 15px;
          cursor: pointer;
          transition: 0.3s;
          outline: none;
          &:hover {
            background:  linear-gradient(#7fbeff, #409EFF);
          }
        }
      }
    }
    .login-form-change {
      padding: 0px 10px 10px 10px;
      background: inherit;
      span {
        color: #409EFF;
        cursor: pointer;
        transition: 0.5s;
        &:hover {
          color: #4d84bb;
        }
      }
    }
  }
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -2000;
    top: 0;
    left: 0;
    transition: 0.5s;
    background: #000000a8;
  }
  .fade-enter-active, .fade-leave-active {
    transition: all .5s;
    transform: translateY(0px);
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(-50px);
  }
</style>
